<script lang="ts" setup>
import { computed, ref } from 'vue';

import { preferences, usePreferences } from '@vben/preferences';

import {
  Col,
  Collapse,
  CollapsePanel,
  Radio,
  RadioGroup,
  Row,
} from 'ant-design-vue';

import { BASE_ICON_URL } from '#/config'; // 引入全局配置

// 定义 form 类型
interface Form {
  [key: string]: boolean | null;
}
// 定义 props 来接收父组件传递的数据
const props = defineProps<{
  activeKey: string[];
  data: {
    id: string;
    list: { id: string; key: string; name: string }[];
    name: string;
  };
  form: Form;
}>();

// 定义 emits 触发更新事件
const emit = defineEmits(['update:active-key', 'update:form']);

const data = ref(props.data);

// 使用 usePreferences 函数获取主题相关信息
const { isDark } = usePreferences();

// 计算当前主题
const currentTheme = computed(() => {
  if (preferences.theme.mode === 'auto') {
    return isDark.value ? 'dark' : 'light';
  }
  return preferences.theme.mode;
});
// 判断面板是否展开
const isPanelActive = computed(() => props.activeKey.includes(data.value.id));

// 折叠事件
const changeCollapse = (e: any) => {
  emit('update:active-key', e);
};

// 获取选中的单选
const getValue = (key: string) => {
  return props.form[key];
};
// 触发单选事件
const radioChange = (e: any, key: string) => {
  const data = props.form;
  data[key] = e.target.value;
  emit('update:form', data);
};
</script>

<template>
  <div class="card-box mb-3 w-full rounded-md p-2">
    <Collapse
      :active-key="props.activeKey"
      :class="[currentTheme]"
      :ghost="true"
      class="list"
      expand-icon-position="end"
      @change="changeCollapse"
    >
      <template #expandIcon>
        <div :class="[currentTheme]" class="text-lg font-bold">
          <img
            :src="`${BASE_ICON_URL}${isPanelActive ? 'icons-20.png' : 'icons-19.png'}`"
            class="mt-2 w-5"
          />
        </div>
      </template>
      <CollapsePanel :key="data.id">
        <template #header>
          <div :class="[currentTheme]" class="text-lg font-bold">
            {{ data.name }}
          </div>
        </template>
        <Row :wrap="true">
          <Col
            v-for="item in data.list"
            :key="item.id"
            :lg="12"
            :md="24"
            :sm="24"
            :xl="12"
            :xs="24"
          >
            <div class="flex items-center justify-between pb-3">
              <div :class="[currentTheme]" class="font-bold">
                {{ item.name }}
              </div>
              <RadioGroup
                :name="item.key"
                :value="getValue(item.key)"
                class="mr-10 flex flex-wrap"
                @change="radioChange($event, item.key)"
              >
                <div class="relative">
                  <Radio :class="[currentTheme]" :value="true"> 是 </Radio>
                </div>
                <div class="relative">
                  <Radio :class="[currentTheme]" :value="false"> 否 </Radio>
                </div>
              </RadioGroup>
            </div>
          </Col>
        </Row>
      </CollapsePanel>
    </Collapse>
  </div>
</template>

<style lang="scss" scoped>
.light {
  color: hsl(var(--card-foreground));
}

:deep(.list .ant-collapse-header:hover) {
  background-color: hsl(var(--primary) / 10%);
}

:deep(.dark .ant-collapse-header:hover) {
  background-color: rgba($color: #e1e1e1, $alpha: 10%);
}

:deep(.ant-collapse-item) {
  border-radius: 0 !important;
}

:deep(.ant-collapse-header) {
  border-radius: 4px !important;
}

.dark img {
  filter: invert(1);
}
</style>
